{include file="public/layout" /}
<body class="laytp-container">
<div class="layui-card" id="search-form">
  <div class="layui-card-body">
    <form class="layui-form layui-row layui-col-space16 layui-search-admin">
    <div class="layui-inline">
      <label class="layui-form-label">文章名称</label>
      <div class="layui-input-inline">
        <input type="text" name="title" placeholder="文章名称" lay-affix="clear" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">选择文章分类</label>
      <div class="layui-input-inline">
        <select name="cat_ic">
          <option value="">选择文章分类</option>
          {foreach $clist as $cat}
            <option value="{$cat.cat_id}">{$cat.cat_name}</option>
          {/foreach}
        </select>
      </div>
    </div>

    <div class="layui-inline">
      <label class="layui-form-label"></label>
      <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
      <button type="reset" class="layui-btn layui-btn-primary">清空</button>
    </div>
  </form>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table id="tabledata" lay-filter="tabledata"></table>
  </div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="add()">
      添加
    </button>
    <button class="layui-btn layui-btn-sm" onclick="reload()">
      刷新数据
    </button>
    <button class="layui-btn layui-btn-sm" onclick="del()">
      批量删除
    </button>
    <button class="layui-btn layui-btn-sm" onclick="excel()">
      导出数据
    </button>

  </div>
</script>
<script type="text/html" id="handlebar">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>

  </div>
</script>
<script>
  var tableIns
  layui.use(function(){
    var table = layui.table;
    var dropdown = layui.dropdown;
    var laydate = layui.laydate;
    var form = layui.form;

    // 创建渲染实例
    tableIns = table.render({
      elem: '#tabledata',
      url:'{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      height: 'full-35', // 最大高度减去其他容器已占有的高度差
      css: [ // 重设当前表格样式
        '.layui-table-tool-temp{padding-right: 145px;}'
      ].join(''),
      cellMinWidth: 80,
      totalRow: false, // 开启合计行
      page: true,
      pagebar: '#test-pagebar', // 分页栏模板
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
        {field:'title', width:80, title: '文章标题',totalRowText: ''},
        {field:'cat_name', title:'文章分类',  width:150},
        {field:'thumb', width:80, title: '图片',toolbar:'#img-id'},
        {field:'add_time', title:'添加时间'},
        {fixed: 'right', title:'操作', width: 134, minWidth: 200, templet:function(d){
            var html = '';
            html += '<a class="layui-btn layui-btn-xs" onclick="edit('+d.id+')">编辑</a>';
            html += '<a class="layui-btn layui-btn-xs" onclick="del('+d.id+')">删除</a>';
            return html;
          }}
      ]],
      error: function(res, msg){
        console.log(res, msg)
      }
    });

    laydate.render({
      elem: '.demo-table-search-date'
    });
    // 搜索提交
    form.on('submit(demo-table-search)', function(data){
      var field = data.field; // 获得表单字段
      // 执行搜索重载
      table.reload('tabledata', {
        page: {
          curr: 1 // 重新从第 1 页开始
        },
        where: field // 搜索的字段
      });
      //layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
      return false; // 阻止默认 form 跳转
    });
  });
  function add(){
    layer.open({
      title: '添加',
      type: 2,
      shadeClose: true,
      area: ['100%','100%'],
      scrollbar:false,
      content: '{:url("edit")}'
    });
  }
  function edit(id){
    layer.open({
      title: '添加',
      type: 2,
      shadeClose: true,
      area: ['100%','100%'],
      scrollbar:false,
      content: '/admin/Article/edit/id/'+id
    });
  }
  function reload(){
    layui.table.reload('tabledata', {
      where: {
        abc: 123,
        test: '新的 test1'
      },
      // scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
      // height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
      //url: '404',
      //page: {curr: 1, limit: 30} // 重新指向分页
    }, true);
  }
  function del(id=0){

    var ids = [];
    if(id==0){
      var checkStatus = layui.table.checkStatus('tabledata');
      var checkData = checkStatus.data;
      if(checkData.length === 0){
        return layer.msg('请选择数据');
      }
      var ids = [];
      for(var i=0;i<checkData.length;i++){
        ids.push(checkData[i]['id']);
      }
    }else{
      ids.push(id)
    }
    layer.confirm('确定要删除吗?',{icon: 7, title:'操作确认'}, function(index) {
      $.post("{:url('del')}", {ids: ids}, function (data) {
        layer.close(index);
        dialog(data.msg, data.status);
        tableIns.reload()
      })
    })
  }
  function excel(){

  }
</script>
</body>
</html>